<template>
	<view class="">
		<dsl-navbar title="我的购物车" isBack="" bgTopImg='white'></dsl-navbar>
		<view class="padding justify-end" @click="rightSubmit">
			{{titleRight}}
		</view>
		<view class="user_classify rowsa align-center solid-bottom">
			<view v-for="(item,index) in classifyList" :key='index' @click="activeClassifyIndex=index">
				<view class="classify_title" :class="{classify_active_title:index==activeClassifyIndex}">{{item.title}}
				</view>
				<view class="active_heng" :class="{active_heng2:index==activeClassifyIndex}"></view>
			</view>
		</view>
		<view v-if="cartList && cartList.length !=0 && activeClassifyIndex == 0">
			<view class="shopping rowsc" v-for="(item,index) in cartList" :key='index' @click="cartMen(item)">
				<view>
					<image :src="item.isSelect?isT:isF" mode="" class="is_select"></image>
				</view>
				<view>
					<image :src="item.image" mode="aspectFill" class="shopping_image"></image>
				</view>
				<view class="margin-left">
					<view class="shopping_title onelineshow">{{item.name}}</view>
					<view class="shopping_content towlineshow">下单时间：{{item.createtime }}</view>
					<view class="flex  shopping_operation">
						<view class="shopping_pay">
							<text style="color: #777777;">
								配置金额:￥{{item.unit_price}}
							</text>
							<view style="font-size: 30rpx;color: #FF4929;font-weight: bold;margin-top: 30rpx;">支付订金：￥{{item.deposit}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="shopping_bottom">
			<view class="align-center margin-left">
				<image :src="isF" mode="" class="is_select" @click="isSelectMen" v-if="!isSelect"></image>
				<image :src="isT" mode="" class="is_select" @click="isSelectMen2" v-else></image>
				<text class="margin-lr-sm">全选</text>
				<text class="shopping_pay">{{zongjia}}</text>
			</view>
			<view class="shopping_submit" @click="submit" v-if="titleRight=='编辑'">结算</view>
			<view class="shopping_submit" @click="delete_cart" v-if="titleRight=='删除'">删除</view>
		</view>
	</view>
</template>

<script>
	import {
		getCatList,
		delete_cart
	} from '@/common/path.js'
	export default {
		data() {
			return {
				cartList: [],
				//选中
				isT: '/static/shopping/icon_xuanzhong.png',
				// 未选中
				isF: '/static/shopping/icon_wxz.png',
				//选中状态
				isSelect: false,
				zongjia: 0,
				//分类
				classifyList: [{
						title: '机械购物车',
						id: 1
					},
					{
						title: '配件购物车',
						id: 2
					},
				],
				activeClassifyIndex: 0,
				titleRight: '编辑',
			}
		},
		onShow() {
			this.getCatList() //购物车列表
			this.zongjia = 0
		},
		methods: {
			//删除
			rightSubmit() {
				if (this.titleRight == '编辑') {
					this.titleRight = '删除'
				} else {
					this.titleRight = '编辑'
				}
			},
			//删除购物车
			delete_cart() {
				let _t = this
				let array = this.cartList
				let arrayList = []
				let isArray = true
				array.forEach(item => {
					if (item.isSelect) {
						arrayList.push(item.id)
						isArray = false
					}
				})
				if (isArray) {
					_t.$tools.showToast('请选择商品')
					return
				}
				console.log('[选中的购物车数据]', arrayList.toString());
				let data = {
					string: arrayList.toString()
				}
				this.Http.POST(delete_cart, data)
					.then((res) => {
						if (res.code == 1) {
							this.getCatList() //购物车列表
							this.$tools.showToast2('删除成功')
							this.zongjia = 0
							this.isSelect = false

						} else {
							this.$tools.showToast(res.msg)
						}
					})


			},


			//单选
			/**
			 * @description 单选
			 * @param {Object} item 全部信息
			 */
			cartMen(item) {
				let _t = this
				let mNum = 0
				let array = _t.cartList
				let array2 = []
				item.isSelect = !item.isSelect
				_t.isSelect = false // 初始化选中状态
				_t.zongjia = 0 //初始化 价格
				array.forEach(item => {
					if (item.isSelect) {
						mNum += item.deposit * 1
						this.zongjia = mNum.toFixed(2)
						array2.push(item)
					}
				})
				if (array2.length == array.length) {
					_t.isSelect = true
				}
			},
			//购物车列表
			getCatList() {
				this.Http.POST(getCatList, {})
					.then((res) => {
						console.log('[购物车列表]', res);
						if (res.code == 1) {
							res.data.forEach(item => {
								item.isSelect = false
							})
							this.cartList = res.data
						} else {
							this.cartList = []
						}
					})
			},
			//全选
			isSelectMen() {
				let _t = this
				let array = _t.cartList
				_t.zongjia = 0
				let mNum = 0
				array.forEach(item => {
					item.isSelect = true
					mNum += item.deposit * 1
					this.zongjia = mNum.toFixed(2)
				})
				_t.isSelect = !_t.isSelect
			},
			isSelectMen2() {
				let _t = this
				let array = _t.cartList
				_t.zongjia = 0
				let mNum = 0
				array.forEach(item => {
					item.isSelect = false
				})
				_t.isSelect = !_t.isSelect
			},
			//提交
			submit() {
				let _t = this
				let array = this.cartList
				let arrayList = []
				let isArray = true
				array.forEach(item => {
					if (item.isSelect) {
						arrayList.push(item)
						isArray = false
					}
				})
				if (isArray) {
					_t.$tools.showToast('请选择商品')
					return
				}
				uni.navigateTo({
					url: '/pages/goods/goodsubmit?commodityData=' + JSON.stringify(arrayList) + '&type=goods' +
						'&zongjia=' + this.zongjia
				})
			},
		},
		// 过滤
		filters: {
			formatDate(data) { //时间戳的过滤
				var date = new Date(data * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
				var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
				var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
				var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
				return Y + M + D + h + m + s;
			},
		},
	}
</script>

<style lang="scss">
	page {
		background: #F5F6F8;
		padding-bottom: 120rpx;
	}

	.user_classify {
		padding: 30rpx;
		display: flex;


		.classify_title {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #9AA2B5;
			opacity: 1;
		}

		.classify_active_title {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 12px;
			color: #FF6B2B;
			opacity: 1;
		}

		.active_heng {
			margin: 0 auto;
			width: 78rpx;
			height: 14rpx;
			opacity: 0.3;
			border-radius: 7rpx;
			margin-top: 10rpx;
			background-color: #F5F6F8;

		}

		.active_heng2 {
			background: #FF6B2B !important;
		}

	}

	.shopping {
		display: flex;
		align-items: center;
		height: 332rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 16rpx rgba(0, 0, 0, 0.03);
		border-radius: 22rpx;
		margin: 0 auto;
		margin: 30rpx;
		margin-top: 15rpx;
		display: flex;
		position: relative;

		.shopping_image {
			width: 195rpx;
			height: 252rpx;
			opacity: 1;
			border-radius: 10rpx;
			margin-left: 10rpx;
			background-color: #EEEEEE;
		}

		.shopping_title {
			position: absolute;
			top: 50rpx;
			width: 380rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			opacity: 1;
		}

		.shopping_content {
			width: 360rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #777777;
			opacity: 1;
			font-size: 24rpx;
		}

		.shopping_pay {
			font-size: 28rpx;
			font-family: PingFang SC;
			opacity: 1;
		}

		.shopping_operation {
			position: absolute;
			bottom: 20rpx;
			width: 380rpx;

			.shopping_plugins {
				width: 177rpx;
				height: 46rpx;
				background: #FFFFFF;
				border: 2rpx solid #DEDEDE;
				opacity: 1;
				text-align: center;
				border-radius: 9rpx;
				line-height: 46rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.plugins_subtract {
					width: 42rpx;
					height: 36rpx;
					background: #F6F7F9;
					opacity: 1;
					border-radius: 9rpx 0px 0px 9rpx;
					line-height: 36rpx;
				}

				.plugins_num {}

				.plugins_add {
					width: 42rpx;
					height: 36rpx;
					background: #F6F7F9;
					opacity: 1;
					border-radius: 0px 9rpx 9rpx 0px;
					line-height: 36rpx;
				}
			}
		}
	}

	//底部功能
	.shopping_bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 750rpx;
		height: 143rpx;
		background: #FFFFFF;
		opacity: 1;
		position: fixed;
		bottom: 0;

		.shopping_pay {
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FF4929;
			opacity: 1;
		}

		.shopping_submit {
			width: 235rpx;
			height: 77rpx;
			background: linear-gradient(180deg, #FF6B2B 0%, #FF8A19 100%);
			opacity: 1;
			line-height: 77rpx;
			text-align: center;
			color: white;
			border-radius: 999rpx;
			margin-right: 30rpx;
		}

	}

	.is_select {
		width: 34rpx;
		height: 34rpx;
		opacity: 1;


	}
</style>
